<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <style type="text/css">
        body {
            background: #5AC2FF;
            height: 100vh;
            overflow: hidden;
        }

        .vueApp {
            height: 100vh;
            overflow: hidden;
        }

        .layer-1 {
            z-index: 10;
            position: absolute;
            top: 25px;
            left: 50px;
            right: 50px;
            height: 455px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
        }

        .layer-2 {
            z-index: 20;
            position: absolute;
            top: 29px;
            left: 38px;
            right: 38px;
            height: 455px;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 10px;
        }

        .layer-3 {
            z-index: 30;
            position: absolute;
            top: 36px;
            left: 27px;
            right: 27px;
            height: 455px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
        }

        .layer-4 {
            z-index: 40;
            position: relative;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 1);
            border-radius: 10px;
            padding: 20px;
            overflow-x: hidden;
            overflow-y: scroll;
            text-align: center;
        }

        .content {
            overflow-y: scroll;
            height: 100%;
            font-size: 15px;
            font-weight: 500;
            color: #222224;
            line-height: 21px;
            word-break: all;
        }

        .icon-audio {
            display: inline-block;
            width: 15px;
            min-width: 15px;
            height: 17px;
            margin-left: 10px;
            vertical-align: middle;
        }

        .popup {
            z-index: 50;
            position: fixed;
            left: 0;
            width: 100%;
            height: 360px;
            background: #fff;
            box-shadow: 0px -1px 8px 0px rgba(30, 34, 39, 0.06);
            border-radius: 40px 40px 0px 0px;
            transition: bottom 0.3s;
        }

        .open {
            bottom: 0;
        }

        .close {
            bottom: -300px;
        }

        .popup-header {
            height: 60px;
        }

        .icon-arrow {
            display: block;
            width: 15px;
            height: 15px;
            margin: 0 auto;
        }

        .arrow-text {
            margin-top: 6px;
            font-size: 13px;
            font-weight: 400;
            color: #808080;
            text-align: center;
        }

        .popup-body {
            height: 300px;
            padding: 0 15px;
            overflow-y: scroll;
        }

        .popup-item {
            padding: 15px 15px 15px 0;
            margin-bottom: 15px;
            background-color: #F3F3F3;
            border-radius: 4px;
            font-size: 14px;
            color: #222224;
        }

        .popup-item p {
            width: 28px;
            min-width: 28px;
            font-size: 10px;
            padding-left: 6px;
            background-color: rgba(0,0,0,0) !important;
        }

        .popup-active, .popup-active p {
            background-color: rgba(0, 204, 131, 0.2);
            color: rgba(0, 204, 131, 1);
        }

        .popup-error, .popup-error p {
            background-color: rgba(255, 247, 226, 0.2);
            color: #FF5656;
        }

        .alphabet {
            font-size: 18px;
            font-weight: 600;
            margin: 0 10px;
            min-width: fit-content;
        }


        .icon-audio {
            display: inline-block;
            width: 15px;
            min-width: 15px;
            height: 17px;
            margin-left: 10px;
            vertical-align: middle;
        }

        .img-cover {
            display: block;
            margin: 15px auto 0 auto;
            width: auto;
            height: auto;
            border-radius: 5px;
        }

        .icon-record {
            width: 55px;
            height: 55px;
            margin: 20px auto 0 auto;
        }

        .text-black {
            font-size: 13px;
            color: #191919;
            text-align: center;
        }

        .box-btns {
            margin: 40px auto 0 auto;
        }

        .btns-item {
            margin: 0 40px;
        }

        .icon-play {
            display: block;
            width: 41px;
            height: 40px;
            margin: 0 auto;
        }

        .text-score {
            margin-bottom: 3.5px;
            font-size: 25px;
            font-weight: 600;
            color: #FD9B43;
            text-align: center;
        }

        .text {
            font-size: 15px;
            font-weight: 500;
            color: #222224;
            line-height: 21px;
            word-break: all;
        }

        .icon-audio {
            display: inline-block;
            width: 15px;
            min-width: 15px;
            height: 17px;
            margin-left: 10px;
            vertical-align: middle;
        }

        .box-grid {
            display: inline-grid;
            margin: 20px auto 0 auto;
            grid-template-columns: 120px 120px;
            grid-template-rows: 135px 135px;
            grid-row-gap: 25px;
            grid-column-gap: 25px;
        }

        .item {
            border: 5px solid transparent;
            border-radius: 10px;
            overflow: hidden;
        }

        .box-grid img {
            display: block;
            width: 120px;
            height: 120px;
            border-radius: 5px;
        }

        .item p {
            background-color: transparent;
            font-size: 10px;
            color: #fff;
            text-align: center;
        }

        .correct {
            border: 5px solid #00C286;
        }
        .correct p {
            background-color: #00C286;
            font-size: 10px;
            color: #fff;
            text-align: center;
        }

        .error {
            border: 5px solid #FF5656;
        }
        .error p {
            background-color: #FF5656;
            font-size: 10px;
            color: #fff;
            text-align: center;
        }

        .swiper-container,
        .sswiper-srapper,
        .swiper-slide {
            width: 100vw;
            height: 100vh;
        }

        .swiper-slide {
            padding: 45px 15px 40px 15px;
        }

        .index {
            z-index: 999;
            position: absolute;
            left: 50%;
            top: 0;
            width: 58px;
            height: 20px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 15px;
            margin-left: -29px;
            font-size: 13px;
            font-weight: 400;
            color: #FFFFFF;
        }

        .image {
            display: block;
            width: 280px;
            height: auto;
            margin: 104px auto 0 auto;
        }

        .score {
            margin-top: 70px;
            color: #FFFFFF;
            font-size: 13px;
        }

        .dot {
            width: 6px;
            height: 6px;
            background: #FD9B43;
            border-radius: 3px;
        }

        .icon-switch {
            width: 22px;
            height: 22px;
        }

        .controls {
            margin-top: 20px;
        }

        .controls .item {
            margin: 0 25px;
            color: #fff;
            font-size: 15px;
            text-align: center;
        }

        .icon-controls {
            display: block;
            width: 69px;
            height: 69px;
            margin: 0 auto;
        }

        .arrow {
            z-index: 999;
            position: absolute;
            top: 50%;
            width: 24px;
            height: 24px;
            margin-top: -14px;
        }

        .left {
            left: 13px;
        }

        .right {
            right: 13px;
        }

        .type {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            color: #222224;
            font-size: 14px;
        }

        .type-icon {
            display: block;
            width: 36px;
            height: 36px;
            margin: 0 auto;
        }
        .content * {
            word-break: keep-all !important;
            word-wrap: break-word !important;
            -webkit-hyphens: none !important;
            text-align: left !important;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="index" data-flex="cross:center main:center">{{wordIndex+1}}/{{listData.length}}</div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in listData">
                    <div class="layer-1"></div>
                    <div class="layer-2"></div>
                    <div class="layer-3"></div>
                    <div class="layer-4" data-flex="cross:center main:center">
                        <div v-if="item.questionTypeCode == 53">
                            <div class="type">
                                <img class="type-icon" src="../../image/ui/question_1.png" alt="">
                                单词
                            </div>
                            <div class="text">
                                {{ item.questionName }}
                                <img v-if="item.questionAudioUrl" @click="handlePlayWord(wordIndex, 2)" :src="item.playType == 2 && isPlay ? '../../image/ui/play.gif' : '../../image/ui/audio.png'" alt=""
                                class="icon-audio">
                            </div>
                            <img v-if="item.questionPicUrl" :src="item.questionPicUrl" class="img-cover cacheImg"  :cacheurl="item.questionPicUrl" alt="">
                            <div class="box-grid">
                                <div class="item" v-for="_item in item.optionList" :class="{'correct': _item.isAnswer == 1,'error': item.answerErrorContent == _item.optionId}">
                                    <p v-if="_item.isAnswer == 1 || item.answerErrorContent == _item.optionId">{{_item.isAnswer == 1 ? '正确答案': '您的答案'}}</p>
                                    <p v-else>&nbsp;</p>
                                    <img :src="_item.optionContent" alt="">
                                </div>
                            </div>
                        </div>
                        <div v-else-if="item.questionTypeCode == 54">
                            <div class="type">
                                <img class="type-icon" src="../../image/ui/question_2.png" alt="">
                                阅读理解
                            </div>
                            <div class="content">
                                <div v-html="item.questionWord"></div>
                                <img v-if="item.questionAudioUrl" @click="handlePlayWord(wordIndex, 2)" :src="item.playType == 2 && isPlay ? '../../image/ui/play.gif' : '../../image/ui/audio.png'" alt=""
                                class="icon-audio">
                            </div>
                            <img v-if="item.questionPicUrl" :src="item.questionPicUrl" class="img-cover cacheImg"  :cacheurl="item.questionPicUrl" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="popup" :class="isOpen ? 'open' : 'close'" v-show="listData[wordIndex].questionTypeCode == 54">
            <div class="popup-header" data-flex="main:center cross:center">
                <div @click="isOpen = !isOpen">
                    <img v-show="isOpen" src="../../image/ui/ad_gray.png" alt="" class="icon-arrow">
                    <img v-show="!isOpen" src="../../image/ui/at_gray.png" alt="" class="icon-arrow">
                    <div class="arrow-text">查看答案</div>
                </div>
            </div>
            <div class="popup-body">
                <div class="popup-item" :class="{'popup-active': _item.isAnswer == 1, 'popup-error': listData[wordIndex].answerErrorContent == _item.optionId}" v-for="_item,index in listData[wordIndex].optionList" data-flex="cross:center">
                    <p v-if="_item.isAnswer == 1 || listData[wordIndex].answerErrorContent == _item.optionId" v-html="_item.isAnswer == 1 ? '正确<br>答案': '您的<br>答案'"></p>
                    <div class="alphabet">{{alphabet[index]}}.</div>
                    <div v-if="_item.optionContentType == 2">
                        <img :src="_item.optionContent" alt="">
                    </div>
                    <div data-flex-box="1" v-else>{{ _item.optionContent }}</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/audio.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam, playIndex = -1;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInit();
        // 初始化播放器
        Audio.init();
        addAudioEvent();
        handlePlayWord(vm.wordIndex, 2);
        // 页面消失
        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            // 停止播放
            Audio.pause();
            // 移除监听事件
            Audio.removeEventListener();
            playIndex = -1;
            vm.isPlay = false;
        });
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                // 目录 id
                catalogId: pageParam.catalogId,
                // 当前索引
                wordIndex: pageParam.index,
                // 是否弹出选择框
                isOpen: false,
                // 选项 A-Z
                alphabet: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
                // 数据列表
                listData: pageParam.listData,
                // swiper 实例
                mySwiper: null,
                // 是否播放音频
                isPlay: false
            },
            methods: {
                initSwiper: function() {
                    this.mySwiper = new Swiper('.swiper-container', {
                        autoplay: false,
                        loop: false,
                        on: {
                            slideChangeTransitionEnd: function() {
                                if(vm.isPlay) {
                                    // 停止播放
                                    Audio.pause();
                                    playIndex = -1;
                                }
                                vm.wordIndex = this.activeIndex;
                                handlePlayWord(vm.wordIndex, 2);
                            }
                        },
                    });
                    this.mySwiper.slideTo(this.wordIndex);
                }
            }
        });
        vm.initSwiper();
    }

    // 播放动作
    // type 1 录音播放 2 原音播发
    function handlePlayWord(index, type) {
        var list = deepCopy(vm.listData),
            item = list[index];
        if(type == 1 && item.score === undefined) {
            fnToast('请先录音');
            return;
        }
        // 暂停
        // 暂停后 playIndex = -1，无法继续播放
        if(playIndex == index && item.playType == type) {
            Audio.pause();
            playIndex = -1;
            vm.isPlay = false;
        }else {
            playIndex = index;
            var src = type == 1 ? item.recordUrl : item.questionAudioUrl;
            Audio.setListAndPlay([{src: src}]);
            vm.isPlay = true;
        }
        item.playType = type;
        vm.listData = list;
    }


    // 音频播放事件回调
    function addAudioEvent() {
        var eventCallback = function(eventType, _playIndex) {
            if(eventType == 0) {
                // 一个音频播放结束
                vm.isPlay = false;
                playIndex = -1;
            }
        };
        var progressCallback = function(progress) {
            // 暂时不需要
        };
        Audio.addEvent(eventCallback, progressCallback);
    }
</script>

</html>